<!-- #layout name=default -->
<div id="main">
    <div class="page-header">
        <h1 class="title"><span>Data table</span>: <strong data-bind="text: name"></strong></h1>
    </div>
    <div class="navbar navbar-default">
        <div class="container-fluid">
            <a href="javascript:;" class="btn green navbar-btn" data-bind="click: addNewColumn.bind($root, null)">New column</a>
        </div>
    </div>
    <table class="table table-striped table-hover">
        <thead>
            <tr>
                <th>Column name</th>
                <th class="table-short">Control type</th>
                <th class="table-short">Primary key</th>
                <th class="table-short">Unique</th>
                <th class="table-short">Index</th>
                <th class="table-action"></th>
            </tr>
        </thead>
        <tbody data-bind="foreach: columns">
            <tr>
                <td>
                    <a href="javascript:;" data-bind="text: $data.name, click: $parent.addNewColumn.bind($root, $data)"></a>
                </td>
                <td data-bind="text: $data.controlTypeName"></td>
                <td>
                    <span class="label label-sm" data-bind="text: Kooboo.text.common[$data.isPrimaryKey() ? 'yes' : 'no'], css: { 'label-default': !$data.isPrimaryKey(), 'green': $data.isPrimaryKey() }"></span>
                </td>
                <td>
                    <span class="label label-sm" data-bind="text: Kooboo.text.common[$data.isUnique() ? 'yes' : 'no'], css: { 'label-default': !$data.isUnique(), 'green': $data.isUnique() }"></span>
                </td>
                <td>
                    <span class="label label-sm" data-bind="text: Kooboo.text.common[$data.isIndex() ? 'yes' : 'no'], css: { 'label-default': !$data.isIndex(), 'green': $data.isIndex() }"></span>
                </td>
                <td>
                    <!-- ko ifnot: $data.isSystem -->
                    <a href="javascript:;" class="btn btn-xs red" data-bind="text: Kooboo.text.common.remove, click: $parent.removeColumn.bind($data)"></a>
                    <!-- /ko -->
                </td>
            </tr>
        </tbody>
    </table>
    <column-editor params="showModal: showColumnModal, data: editingColumn, isNew: isNewColumn, onSave: onSaveColumn"></column-editor>
    <div data-bind="component: { name: 'kb-field-editor', params: {
        onShow: onFieldModalShow,
        onSave: onFieldSave,
        data: fieldData,
        options: {
            controlTypes: ['textbox', 'textarea', 'boolean', 'datetime', 'number'],
            showMultilingualOption: false,
            showPreviewPanel: true,
            showDBColumnPanel: true
        }
    }}"></div>

    <div class="page-buttons">
        <button data-bind="click: onSave" class="btn green">Save</button>
        <a data-bind="attr: { href: returnUrl }" class="btn gray">Cancel</a>
    </div>
</div>
<script>
    Kooboo.columnEditor = {};
</script>
<script>
    (function() {
        Kooboo.loadJS([
            "/_Admin/Scripts/dataBase/controlTypes.js",
            "/_Admin/Scripts/dataBase/controlTypeNames.js",
            "/_Admin/Scripts/dataBase/columnEditor.js",
            "/_Admin/Scripts/components/kbFieldEditor.js"
        ])
    })()
</script>
<script src="/_Admin/View/Storage/Database/Columns.js"></script>